<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>homework01</title>
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			//ready()事件源语法：$(document).ready(function(){});
			//              或：$(function(){}); (简写)
			//在body最后一个元素，不用写
			$(document).ready(function(){
				//吸顶灯效果---BOM案例：浏览器6个对象的方法使用
				//思路：1.鼠标滚动，滚动到吸顶灯元素位置处，效果改变
				//     2.页面顶部到吸顶灯位置：200px，大于200px
				//     3.追加一个样式：固定定位，页面顶部位置
				
				//1.追加样式：吸顶灯卡在页面顶部
				//2固定值：页面顶部到吸顶灯位置
				//offset()：获取或者设置元素相对于文档的偏移量
				//offset().top  从顶部到
				var ost=$("#sticky").offset().top;
				//滚动值：BOM对象+事件源
				//$(window) 抓取页面Window对象，监听窗口事件：窗口改变、滚动
				//理解：实时抓取页面滚动值
				$(window).scroll(function(){
					//滚动值：获取页面滚动位置
				    //scrollTop() 获取页面滚动垂直距离
				    var st=$(window).scrollTop();
				    //固定值<滚动值，滚动超过200，实现切换：吸顶效果
				    if(ost<st){
					    //条件成立，大于200px，切换
					    $("#sticky").addClass("sticky02");
				    }else{
				    	//条件不成立，小于200px，移除
				    	$("#sticky").removeClass("sticky02");
				    }
				});
				
			});
		</script>
		<style>
			div#top_context{
				width: 100%;
				height: 200px;
				background-color: #eee;
				color: #000;
				text-align: center;
				line-height: 200px;
			}
			div#sticky{
				width: 100%;
				height: 30px;
				background-color: #333;
				color: #ffffff;
				text-align: center;
				line-height: 30px;
			}
			div#context{
				width: 100%;
				height: 8000px;
			}
			/* 切换样式：吸顶灯卡在页面顶部 */
			.sticky02{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="top_context">顶部内容区域</div>
		<div id="sticky">我是吸顶元素</div>
		<div id="context">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque adipisci in, quos accusantium maxime minima, ipsum aperiam consectetur id maiores debitis nam, ipsa possimus illum? Aliquam ipsam sed impedit porro?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi, officiis harum sint perspiciatis ratione quibusdam ipsum quam voluptates quasi, dolorem vel vero consectetur eveniet quidem adipisci minus nihil neque facilis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolorem dolor veritatis, sunt consequuntur cumque nisi quis omnis ratione tenetur! Consequuntur nisi laboriosam, et impedit accusantium blanditiis dolores quasi natus.</div>
		
	</body>
</html>